// 查看物流状态
<template>
  <view>
    <view class="top">
      <image :src="goodsForm.goods_list[0].goods_image" mode="aspectFill" />
      <view>运输中</view>
    </view>
    <view class="bottom">
      <!-- 收 -->
      <view class="receipt-box">
        <view class="receipt-left">收</view>
        <view class="receipt-right"> {{ goodsForm.address }}</view>
      </view>
      <!-- 运输中 -->
      <view class="transport-box">
        <text class="transport-left iconfont icon-duigou1"></text>
        <view class="transport-right">
          <view class="transport-title">运输中</view>
          <view class="transport-driver">
            <text class="dirver-name"
              >司机{{ goodsForm.diver_name || '' }}</text
            >
            <text class="driver-phone" @tap="callDriver">{{
              goodsForm.diver_phone || ''
            }}</text>
            <text
              v-if="goodsForm.diver_phone"
              class="iconfont icon-dianhua"
            ></text>
            <text class="driver-text">正在运送</text>
          </view>
          <view class="transport-time" v-if="goodsForm.pay_time">
            {{ goodsForm.pay_time | FormDate }}
          </view>
        </view>
      </view>
      <!-- 仓库处理中 -->
      <view class="warehouse-box">
        <view class="warehouse-left iconfont icon-duigou1"></view>
        <view class="warehouse-right">
          <view class="warehouse-title">仓库处理中</view>
          <view class="warehouse-content">
            您的订单由仓库拣货完成，待交付专送司机
          </view>
          <view class="warehouse-time">
            {{ goodsForm.createtime | FormDate }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 商品
      goodsForm: {}
    }
  },
  onLoad(options) {
    this.goodsForm = uni.getStorageSync('logDetail')
    let image = this.goodsForm.goods_list[0].goods_image
    image = image.startsWith('http') ? image : this.$baseURL + image
    this.goodsForm.goods_list[0].goods_image = image

    console.log('商品', this.goodsForm)
    // 获取订单详情
    this.getDetail()
  },
  filters: {
    FormDate: function (val) {
      const date = new Date(val * 1000)
      let Y = date.getFullYear()
      let M = date.getMonth() + 1
      M = M < 10 ? '0' + M : M
      let D = date.getDate()
      D = D < 10 ? '0' + D : D

      let h = date.getHours()
      h = h < 10 ? '0' + h : h

      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s

      return Y + '-' + M + '-' + D + '    ' + h + ':' + m + ':' + s
    }
  },
  methods: {
    async getDetail() {
      const res = await this.$http.post('/api/kuerp/order/index/orderInfo', {
        order_num: this.goodsForm.order_num
      })
      console.log('订单详情', res)
    },
    // 拨打司机电话
    callDriver() {
      uni.makePhoneCall({
        phoneNumber: this.goodsForm.diver_phone
      })
    }
  }
}
</script>

<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
.top {
  background-color: #f7f7f7;
  padding: 20rpx 32rpx;
  display: flex;
  align-items: center;
  image {
    width: 70rpx;
    height: 70rpx;
    background: #d8d8d8;
    border-radius: 12rpx;
  }
  view {
    margin-left: 20rpx;
    font-size: 32rx;
    font-weight: 500;
    color: #111111;
  }
}
.bottom {
  padding: 50rpx;
  .receipt-box {
    width: 100%;
    min-height: 96rpx;
    border-left: 1px dashed #ccc;
    position: relative;
    padding-top: 15rpx;
    padding-bottom: 28rpx;
    .receipt-left {
      position: absolute;
      left: -28rpx;
      top: 0;
      width: 56rpx;
      height: 56rpx;
      border-radius: 50%;
      background-color: #f6403f;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
    .receipt-right {
      margin-left: 56rpx;
    }
  }
  .transport-box {
    position: relative;
    border-left: 3rpx solid #cccccc;
    min-height: 180rpx;
    padding-top: 15rpx;
    padding-bottom: 28rpx;
    .transport-left {
      position: absolute;
      font-size: 56rpx;
      color: #f6403f;
      position: absolute;
      left: -28rpx;
      top: 0;
      width: 56rpx;
      height: 56rpx;
      background-color: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .transport-right {
      margin-left: 56rpx;

      .transport-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #111111;
      }
      .transport-driver {
        margin-top: 10rpx;
        .dirver-name {
          font-size: 26rpx;
          color: #111111;
        }
        .driver-phone {
          font-size: 26rpx;
          color: #f6403f;
        }
        .icon-dianhua {
          display: inline-block;
          font-size: 22rpx;
          color: #f74444;
          transform: rotateY(180deg);
        }
        text {
          &:last-child {
            font-size: 26rpx;
            color: #111111;
          }
        }
      }
      .transport-time {
        margin-top: 10rpx;
        font-size: 26rpx;
        color: #111111;
      }
    }
  }
  .warehouse-box {
    position: relative;
    padding-top: 15rpx;
    padding-bottom: 28rpx;
    .warehouse-left {
      position: absolute;
      font-size: 56rpx;
      color: #cccccc;
      position: absolute;
      left: -28rpx;
      top: 0;
      width: 56rpx;
      height: 56rpx;
      background-color: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .warehouse-right {
      margin-left: 56rpx;

      .warehouse-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #666666;
      }
      .warehouse-content {
        margin-top: 10rpx;
        color: #666666;
      }
      .warehouse-time {
        margin-top: 10rpx;
        font-size: 26rpx;
        color: #666666;
      }
    }
  }
}
</style>
